<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <div class="box2">
        <div class="box1">1</div>
        <div class="box4">2</div>
        <div class="box5">5</div>
      </div>
      <div class="box3">3</div>
    </div>
  </body>
</html>
<script>
  // document由节点构成 节点包含 元素标签 空格换行....
  // 节点 ：node  元素 ：element
  // 一、子关系；

  var box2 = document.querySelector(".box2");
  //     // 1.子节点：获取所有的子节点  元素.childNodes
  //     // var eles = box2.childNodes;
  //     // console.log(eles);

  //     // 2.子元素: 获取所有的子元素 元素.children;
  //    // console.log(  box2.children);

  // 3.获取到第一个子元素 firstElementChild
  // document.onclick = function(){
  //     console.log(box2.firstElementChild)
  // }
  // 4.获取第一个子节点firstChild
  // document.onclick = function(){
  //     console.log(box2.firstChild)
  // }

  // 5.获取最后一个子元素lastElementChild
  // document.onclick = function(){
  //     console.log(box2.lastElementChild);
  // }
  // 6.获取最后一个子节点 :lastChild;
  document.onclick = function () {
    console.log(box2.lastChild);
  };

  // 总结： 1.所有的子元素 2.所有的子节点 3.第一个子元素 4.第一个子节点 5.最后一个子元素 6.最后一个子节点
</script>
